

// 初始化商品页面
function initProduct() {
    show(1, 15);
    setProductModal();
    initModalCategory();
    $('#product_img_file').on('change', function (e) {
        uploadProductImg(e)
    });
}

// 设置表单的值
function setProductModal() {
    const itemModal = document.getElementById('itemModal');
    if (itemModal) {
        itemModal.addEventListener('show.bs.modal', event => {
            resetProduct_form();
            const button = event.relatedTarget;
            const type = button.getAttribute('data-bs-type');
            const modalTitle = $('#modalTitle');
            const product_modal_submit = $('#product_modal_submit');
            if (type == 'add') {
                modalTitle.text('添加商品');
                product_modal_submit.text('添加');
                product_modal_submit.off('click').on('click', function () {
                    addProduct()
                });
            } else if (type == 'edit') {
                modalTitle.text('修改商品');
                product_modal_submit.text('保存');
                product_modal_submit.off('click').on('click', function () {
                    updateProduct()
                });
            }
        });
    }
}

// 初始化表单分累的页数
function initModalCategory() {
    var getData = pageCategory();
    for (let i = 1; i <= getData.data.pages; i++) {
        var row = '<option value="' + i + '">' + i + '</option>';
        $('#product_category_page').append(row);
    }
    $('#product_category_page').on('change', function () {
        var getData = pageCategory($('#product_category_page').val());
        modalCategoryData(getData);
    });
    modalCategoryData(getData);
}

// 分类的表单处理
function modalCategoryData(getData) {
    var categoryId = $('#product_categoryId');
    categoryId.children().remove();
    getData.data.records.forEach(function (item) {
        var row = '<option value="' + item.id + '">' + item.name + '</option>';
        categoryId.append(row);
    });
}

// 清空表单
function resetProduct_form() {
    document.querySelector('#product_form').reset();
    var label = $('#product_img_label');
    label.children().remove();
    const row = '<div id="imgMatrix" class="border border-dark">\n' +
        '            <div id="imgHeng"></div>\n' +
        '            <div id="imgShu"></div>\n' +
        '        </div>';
    label.append(row);
}

// 处理分页的页数
function productPageItem(e) {
    var targetPage = $(e).val();
    var pageLink = $('#pageLink');
    var getPageNum = pageLink.data("page").pageNum;
    var maxPage = pageLink.data("page").pages;
    var name = pageLink.data("page").name;
    var categoryName = pageLink.data("page").categoryName;
    if (targetPage > 0) {
        if (getPageNum == targetPage) {
            return;
        }
        show(targetPage,undefined, name, categoryName);
        return;
    }
    if (targetPage == 0) {
        targetPage = 1;
    }
    var finalPage = targetPage + getPageNum;
    if (finalPage < 1 || finalPage > maxPage) {
        return;
    }
    show(finalPage,undefined, name, categoryName);
}

// 渲染分页查询的商品
function show(pageNum, pageSize, name, categoryName) {
    var tbody = $('#tbody');
    var pageLink = $('#pageLink');
    if(!pageNum){
        pageNum = pageLink.data('page').pageNum;
    }
    if(!pageSize){
        pageSize = pageLink.data('page').pageSize;
    }

    var getData = pageProduct(pageNum, pageSize, name, categoryName);

    if(pageNum > getData.data.pages && pageNum != 1){
        show(getData.data.pages, pageSize, name, categoryName);
        return;
    }
    tbody.children().remove();
    getData.data.records.forEach(item => {
        const row = '<tr>\n' +
            '                            <th scope="row">' +
            '                               <input class="checkBox form-check-input" type="checkbox" id="check" name="option1" value="' + item.id + '">\n' +
            '                           </th>     ' +
            '                            <td><span class="d-flex justify-content-center">' + item.code + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">' + item.title + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">' + item.stocks + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">' + item.description + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">' + item.categoryName + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center"><img src="' + item.img + '"\n' +
            '                                     style="width: 50px; height: 35px;"></span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">' + item.price + '</span></td>\n' +
            '                            <td><span class="d-flex justify-content-center">\n' +
            '                                <span class="dropdown">\n' +
            '                                  <button class="btn dropdown-toggle" data-bs-boundary="viewport"\n' +
            '                                          data-bs-toggle="dropdown">操作</button>\n' +
            '                                    <ul class="dropdown-menu "\n' +
            '                                        style="min-width: 1px;">\n' +
            '                                        <li>\n' +
            '                                            <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#itemModal" data-bs-type="edit" onclick="updateProductModal(this)"  type="button" value="' + item.id + '">编辑</button>\n' +
            '                                        </li>\n' +
            '                                        <li>\n' +
            '                                            <button class="dropdown-item" type="button" onclick="deleteProduct(this)" value="' + item.id + '">删除</button>\n' +
            '                                        </li>\n' +
            '                                    </ul>\n' +
            '                                </span>\n' +
            '                             </span></td>\n' +
            '                        </tr>';
        tbody.append(row);
    });

    pageLink.data("page", {
        pages: getData.data.pages,
        pageNum: pageNum,
        pageSize: pageSize,
        name: name,
        categoryName: categoryName
    });
    // 设置选择头
    $('#checkHead').prop('checked', false);
    setPageFront( (pageNum - 1) * pageSize + 1,pageNum * pageSize > getData.data.total ? getData.data.total: pageNum * pageSize, getData.data.total);
    loadPagingLabel(pageLink);
    setPagingLabel(pageLink);
    $('td').addClass('align-middle');
    $('.page-item').on('click', function () {
        productPageItem(this);
    })
}


// 商品上传表单回显数据
function updateProductModal(e) {
    // 获取数据
    var getData = idGetProduct($(e).val());
    // 图片处理
    $('#product_id').val($(e).val());
    $('#productImgLabel').children().remove();
    const img = '<img id="product_img" alt="图片" class="border border-dark" src="' + getData.data.img + '" style="width: 103px;height: 103px;margin-top: -10px">';
    $('#productImgLabel').append(img);
    $('#product_code').val(getData.data.code);
    modalCategoryData(pageCategory(parseInt(getData.data.categoryId / 5) + 1))
    $('#product_title').val(getData.data.title);
    $('#product_categoryId').val(getData.data.categoryId);
    $('#product_price').val(getData.data.price);
    $('#product_description').val(getData.data.description);
    $('#product_stocks').val(getData.data.stocks);
}

